import React, { Component } from 'react'
import { Tag } from 'antd'
import $ from 'jquery'
import './BooksClassify.less'
export default class BooksClassify extends Component {
  constructor() {
    super()
    this.state = {
      classify: '全部',
      tags: '全部',
      uploadDate: '全部',
      collectNum: '全部'
    }
  }
  //获取书籍
  getData = () => {
    const params = {}
    if (this.state.classify !== '全部') {
      params.classify = this.state.classify
    }
    if (this.state.tags !== '全部') {
      params.tags = this.state.tags
    }
    if (this.state.uploadDate !== '全部') {
      params.uploadDate = this.state.uploadDate
    }
    if (this.state.collectNum !== '全部') {
      params.collectNum = this.state.collectNum
    }
    this.props.getShowBooksList({ ...params, status: 'allow' })
  }
  //类型选择
  classChoose() {
    const _this = this
    $('.bookslist-tag span').on('click', function(e) {
      e.stopPropagation()
      //选中的标签添加样式
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active')
    })
    //标签选择,没选择一个进行一次请求
    for (let i = 1; i < 5; i++) {
      $(`.calssify${i} span`).on('click', function(e) {
        e.stopPropagation()
        if (i === 1) {
          _this.setState(
            {
              classify: $(this).text()
            },
            () => {
              _this.getData()
            }
          )
        } else if (i === 2) {
          _this.setState(
            {
              tags: $(this).text()
            },
            () => {
              _this.getData()
            }
          )
        } else if (i === 3) {
          _this.setState(
            {
              uploadDate: $(this).text()
            },
            () => {
              _this.getData()
            }
          )
        } else if (i === 4) {
          _this.setState(
            {
              collectNum: $(this).text()
            },
            () => {
              _this.getData()
            }
          )
        }
      })
    }
  }
  componentDidMount() {
    // this.getData()
    this.classChoose()
  }
  render() {
    return (
      <div className="bookslist-tag">
        <div className="activeAll">
          <p>已选</p>
          <div>
            {this.state.classify === '全部' &&
            this.state.tags === '全部' &&
            this.state.uploadDate === '全部' &&
            this.state.collectNum === '全部' ? (
              <Tag className="active">全部</Tag>
            ) : null}
            {this.state.classify === '全部' ? null : (
              <Tag
                closable
                className="active"
                onClose={() =>
                  this.setState({ classify: '全部' }, () => {
                    this.getData()
                    $('.calssify1 >div span:first-child')
                      .addClass('active')
                      .siblings()
                      .removeClass('active')
                  })
                }
              >
                {this.state.classify}
              </Tag>
            )}
            {this.state.tags === '全部' ? null : (
              <Tag
                closable
                className="active"
                onClose={() =>
                  this.setState({ tags: '全部' }, () => {
                    this.getData()
                    $('.calssify2 >div span:first-child')
                      .addClass('active')
                      .siblings()
                      .removeClass('active')
                  })
                }
              >
                {this.state.tags}
              </Tag>
            )}
            {this.state.uploadDate === '全部' ? null : (
              <Tag
                closable
                className="active"
                onClose={() =>
                  this.setState({ uploadDate: '全部' }, () => {
                    this.getData()
                    $('.calssify3 >div span:first-child')
                      .addClass('active')
                      .siblings()
                      .removeClass('active')
                  })
                }
              >
                {this.state.uploadDate}
              </Tag>
            )}
            {this.state.collectNum === '全部' ? null : (
              <Tag
                closable
                className="active"
                onClose={() =>
                  this.setState({ d: '全部' }, () => {
                    this.getData()
                    $('.calssify4 >div span:first-child')
                      .addClass('active')
                      .siblings()
                      .removeClass('active')
                  })
                }
              >
                {this.state.collectNum}
              </Tag>
            )}
          </div>
        </div>
        <div className="calssify1">
          <p>内容</p>
          <div>
            <span className="active">全部</span>
            <span>人文社科</span>
            <span>经济管理</span>
            <span>文学</span>
            <span>生活图书</span>
            <span>文化艺术</span>
            <span>科学技术</span>
            <span>医学卫生</span>
            <span>文化教育</span>
            <span>其他</span>
          </div>
        </div>
        <div className="calssify2">
          <p>标签</p>
          <div>
            <span className="active">全部</span>
            <span>仅借阅</span>
            <span>仅出售</span>
            <span>借阅+出售</span>
          </div>
        </div>
        <div className="calssify3">
          <p>上传日期</p>
          <div>
            <span className="active">全部</span>
            <span>最新</span>
            <span>今年</span>
            <span>去年</span>
            <span>更久之前</span>
          </div>
        </div>
        <div className="calssify4">
          <p>收藏次数</p>
          <div>
            <span className="active">全部</span>
            <span>大于70</span>
            <span>40~70</span>
            <span>20~40</span>
            <span>小于20</span>
          </div>
        </div>
      </div>
    )
  }
}
